import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';

import { WeaMenu } from 'weaPortalPublic';

import E9LeftMenuTop4Email from './E9LeftMenuTop4Email';

@inject('portalThemeStore')
@observer
class E9LeftMenu extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.onModeChange = this.onModeChange.bind(this);
  }

  newheight = () => {
    let asdh = $('.e9aside-container').height() - $('.e9aside-container .wea-intro-step').height();
    $('.e9aside-container #menuScrollWrapper').css({ height: asdh });
    $('.wea-menu-vertical .ant-menu-vertical .ant-menu-submenu > .ant-menu-sub').css({ maxHeight: asdh, overflow: 'auto' });
  };

  componentDidMount() {
    window.addEventListener('resize', this.newheight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.newheight);
  }

  componentDidUpdate() {
    const { portalThemeStore } = this.props;
    portalThemeStore.onLoadLeftMenuCount();
  }

  render() {
    const { portalThemeStore } = this.props;
    const { themeInfo, leftMenuObj, leftMenuMode, translatepage } = portalThemeStore;

    const { themeData = {} } = themeInfo;
    const { styleConfig = {} } = themeData;
    const { leftmenu = {} } = styleConfig;
    const fontSize = parseInt(leftmenu.titleFontSize || '12px');

    const { leftMenu = [], leftMenuSelected = {}, leftMenuType } = leftMenuObj;
    let _leftMenu = toJS(leftMenu);
    let _leftMenuSelected = toJS(leftMenuSelected);
    let _selectedKey = _leftMenuSelected.id;

    return (
      <div className="e9aside-container">
        <WeaMenu
          ecId={`${(this && this.props && this.props.ecId) || ''}_WeaMenu@og5dar`}
          mode={leftMenuMode}
          needSwitch={true}
          inlineWidth={197}
          verticalWidth={61}
          fontSize={fontSize}
          datas={leftMenuType == 'email' && leftMenuMode == 'inline' ? _leftMenu.slice(2) : _leftMenu}
          defaultSelectedKey={_selectedKey}
          onSelect={this.onSelect}
          onModeChange={this.onModeChange}
          addonBefore={
            leftMenuType == 'email' ? (
              <E9LeftMenuTop4Email
                ecId={`${(this && this.props && this.props.ecId) || ''}_E9LeftMenuTop4Email@pggxty`}
                emailMenu={_leftMenu}
                onSelect={this.onSelect}
              />
            ) : null
          }
          addonBeforeHeight={leftMenuType == 'email' ? 40 : 0}
          translatepageheight={translatepage == '1' ? 30 : 0}
          translatepage={translatepage}
        />
      </div>
    );
  }

  onSelect(key, item, type) {
    window.isPortalRender = true;

    // type=0表示正常点击菜单，type=1表示点击菜单后面的图标
    const { portalThemeStore } = this.props;
    if (type == 1 && item.id == '536-53606') {
      // 邮件菜单，清空垃圾箱
      portalThemeStore.onClearEmail(item);
    } else if (type == 0 && (item.id === '536-53611' || item.id === '536-53610')) {
      // 我的文件夹和我的标签菜单不跳转路由
    } else {
      if (type == 1) {
        item.url = item.titleUrl;
      }
      portalThemeStore.onLeftMenuSelectedChange(item);
      portalThemeStore.onLoadMain(item);
    }
  }

  onModeChange(leftMenuMode) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onLeftMenuModeChange(leftMenuMode);
  }
}

export default E9LeftMenu;
